<template>
  <div style="display: flex;width: 100%;height: 100vh;">
    <div class="left-container">
    </div>
    <div class="welcome-title">
      <div style="font-size: 30px;font-weight: bold">海洋捕捞上报系统</div>
      <div style="margin-top: 10px">海洋捕捞业是传统海洋产业，是海洋水产业的重要组成部分</div>
      <div style="margin-top: 5px">本系统为海洋捕捞工作的相关人员提供一个快捷方便的上报，管理平台，同时支持导出报表和统计分析</div>
    </div>
      <!-- <router-view>
        <transition name="fade-transform" mode="out-in"></transition>
      </router-view> -->
      
        <transition name="fade-transform" mode="out-in">
          <router-view></router-view>
        </transition>
      
  </div>
</template>

<script>
import router from '@/router'

export default {

  components: { router }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

</style>

<style lang="scss" scoped>

.left-container {
  width: 75%;
  background-image: url("../../assets/login_images/login1.png");
  background-size: cover;
  background-position: center;
}

.welcome-title {
  position: absolute;
  bottom: 30px;
  left: 30px;
  color: white;
  text-shadow: 0 0 10px black;
}

.container {
  width: 25%;
  height: 100%;
  // background-color: rgb(252, 252, 241);
}
</style>
